//从node_modules目录中导入vue等插件，如果在本地工程中则要用相对路径导入。
//相对路径的原则：
//如果是在相同目录下则用: ./router,后缀名js可以省略。
//如果是在相同目录下的另一个文件夹则用：'./config/env.js'
//如果是在相同目录下另一个文件夹中引用另一个文件夹中则用：'../source/source.js'
import Vue from 'vue';
import iView from 'iview';
import VueRouter from 'vue-router';
import Routers from './router';
import Vuex from 'vuex';
import Util from './libs/util';
import App from './app.vue';
import 'iview/dist/styles/iview.css'; //引用node_modules中插件目录中的文件

import VueI18n from 'vue-i18n';
import Locales from './locale';
import zhLocale from 'iview/src/locale/lang/zh-CN';
import enLocale from 'iview/src/locale/lang/en-US';


//Vue.use  :安装插件
Vue.use(VueRouter);
Vue.use(Vuex);
Vue.use(VueI18n);
Vue.use(iView);

// 自动设置语言
const navLang = navigator.language; //navigator对象：是浏览器全局变量，包含有关浏览器的信息 具体：http://www.w3school.com.cn/jsref/dom_obj_navigator.asp,这里返回浏览器的语言环境
const localLang = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false;//js三元表达式 （表达式）?true:false;
const lang = window.localStorage.getItem('language') || localLang || 'zh-CN'; // ||作用： var = var1||var2||var3,如果var1为真，后面就不执行，如果var1为false,则继续判断var2..

Vue.config.lang = lang;//把语言配置到vue的配置文件中。

// 多语言配置
const locales = Locales; //导入格式
const mergeZH = Object.assign(zhLocale, locales['zh-CN']); //Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
const mergeEN = Object.assign(enLocale, locales['en-US']);
Vue.locale('zh-CN', mergeZH);
Vue.locale('en-US', mergeEN);


// 路由配置
const RouterConfig = {
    mode: 'history', //路由使用的模式。
    routes: Routers //路由的内容给，可以自定义配置，这里是从./router.js导入的
};
const router = new VueRouter(RouterConfig); //新建一个router对象。

// 注册一个全局前置守卫：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
router.beforeEach((to, from, next) => {  // (a,b,c) => 这个是es2015函数的写法。
    iView.LoadingBar.start(); //全局调用LoadingBar组件，这是个进度条组件，在页面的最顶端。
    Util.title(to.meta.title);
    next(); //必须要执行next()
});

router.afterEach(() => { //注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：router结束后发生的事件。
    iView.LoadingBar.finish(); //结束滚动条 
    window.scrollTo(0, 0); //浏览器滚动条转到最顶层。
}); 

//vuex用来管理vue的所有组件状态https://blog.csdn.net/qq_33599109/article/details/79392520
const store = new Vuex.Store({
    state: {

    },
    getters: {

    },
    mutations: {

    },
    actions: {

    }
});

//创建全局的vue实例。
new Vue({
    el: '#app',
    router: router,
    store: store,
    render: h => h(App) //Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。这里是导入App的配置。
});